<!Doctype html>
<!--  https://www.babeljs.cn/ 选用试一试 编译 -->
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="preact.min.js"></script>
    <script type="text/javascript" src="preact.hooks.min.js"></script>
    <script type="text/javascript" src="babel.min.js"></script>

</head>
<body>
<div id="root"></div>
</body>


<script type="text/babel">
/** @jsx h */
const {h, render} = preact;
const {useState} = preactHooks;
const App = (props) => {
    const [input, setInput] = useState('');
	return (
        <div>
    		<h1>{props.title}{input}</h1>
            <p>Do you agree to the statement: "Preact is awesome"? {input}</p>
            <input value={input} onInput={e => setInput(e.target.value)} />
        </div>
	)
}
preact.render(
    <App title="标题"/>,
    document.getElementById('root')
);
</script>
</html>
